<blockquote class="layui-elem-quote">
    <div class="layui-collapse" lay-filter="newFood">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">新建食物类型</h2>
            <div class="layui-colla-content">
                <form class="layui-form" *ngIf="foodCreate">
                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">食物名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入食物名称" autocomplete="off" class="layui-input" [(ngModel)]="foodCreate.name">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">食物价格</label>
                            <div class="layui-input-inline">
                                <input type="text" name="price" required lay-verify="required" placeholder="请输入食物价格" autocomplete="off" class="layui-input" [(ngModel)]="foodCreate.price">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-inline">
                            <label class="layui-form-label">描述信息</label>
                            <div class="layui-input-block">
                                <textarea name="desc" placeholder="请输入内容" class="layui-textarea" [(ngModel)]="foodCreate.desc"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo" (click)="createFood()">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</blockquote>
<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col width="80">
        <col width="400">
        <col width="150">
    </colgroup>
    <thead>
        <tr>
            <th>食物编号</th>
            <th>食物名称</th>
            <th>价格</th>
            <th>详细描述</th>
            <th>相关操作</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let food of foods">
            <td>{{food.id}}</td>
            <td>{{food.name}}</td>
            <td>{{food.price}}</td>
            <td>{{food.desc}}</td>
            <td>
                <a class="layui-btn layui-btn-xs" lay-event="edit" (click)="onSelect(food)">详细信息</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" (click)="deleteFood(food)">删除</a>
            </td>
        </tr>
    </tbody>
</table>